<template>
  <div>
    <button @click="$doit()">全局方法调用</button>
    <h1>dom 引用</h1>
    <input ref="inp" />
    <button @click="getInp">获取表单值</button>
    <h1>生命周期</h1>
    <h1>监听watch</h1>
    <p>监听数据的变化，执行回调函数</p>
    <p>没有缓存，一对多（监听一个，更改多个）</p>

    <h1>计算computed {{ num }}</h1>
    <p>{{ doubleNum }}</p>
    <input v-model.number="num" />
    <p>计算出来的值是只读的：不能修改，不用v-model绑定</p>
    <h1>列表渲染 v-for</h1>
    <p>对象:</p>
    <div v-for="(value, key) in { name: 'mumu', age: 18 }" :key="key">
      {{ key }}:{{ value }}
    </div>
    <p>数组:</p>
    <!-- v-for需要指定key key要求是唯一，提高虚拟dom比较（diff算法）的速度 -->
    <!-- 也可以提高对列表进行过滤，排序 的渲染速度-->
    <!-- key值在相同的兄弟元素中要求唯一 -->
    <div v-for="(item, index) in list" :key="item">
      {{ index + 1 }}-{{ item }}
    </div>
    <div v-for="item in ['vue', 'vue3', 'axios']" :key="item + 'c'">
      {{ item }}
    </div>
    <p>字符串：</p>
    <div v-for="item in msg" :key="item + 'b'">{{ item }}</div>
    <p>数字</p>
    <div v-for="item in 10" :key="item + 'a'">{{ item }}</div>
    <h1>表单修饰符：</h1>
    <p>{{ msg }}</p>
    <p>
      trim: 移除两端空白
      <input v-model.trim="msg" />
    </p>
    <p>
      lazy: 等待change事件触发更新
      <input v-model.lazy="msg" />
    </p>
    <p>{{ num + 10 }}</p>
    <p>
      number:转换为数字
      <input v-model.number="num" />
    </p>
    <h1>表单绑定 v-model</h1>
    <p>{{ msg }}</p>
    <input v-model="msg" />
    <input :value="msg" @input="msg = $event.target.value" />
    <br />
    <p>多个选框一个值 勾选是true，不勾选是false</p>
    <input type="checkbox" v-model="agree" />
    {{ agree }}
    <p>多选框多个值</p>
    <input type="checkbox" value="唱歌" v-model="hobby" />
    唱歌
    <input type="checkbox" value="跳舞" v-model="hobby" />
    跳舞
    <input type="checkbox" value="打篮球" v-model="hobby" />
    打篮球
    <p>hobby:{{ hobby }}</p>

    <p>单选</p>
    <input type="radio" value="1" v-model="gender" group="gender" />
    男
    <input type="radio" value="2" v-model="gender" group="gender" />
    女
    <input type="radio" value="3" v-model="gender" group="gender" />
    保密
    <p>性别：{{ gender }}</p>

    <p>下拉选择</p>
    <select v-model="gender">
      <option value="1">男</option>
      <option value="2">女</option>
      <option value="3">保密</option>
    </select>

    <h1>按键修饰符</h1>
    <input type="text" @keyup.enter="showIt" />
    <pre>
1. enter 回车键
2. esc 取消
3. space 空格
4. up left right bottom 上下左右
5. delete 删除或退格
    </pre>
    <h1>事件修饰符</h1>
    <p @click.stop="sayIt">.stop 阻止事件冒泡</p>
    <p @click.once="sayIt">.once 只响应一次</p>
    <p>
      <a href="http://dida100.com" @click.prevent="sayIt">
        .prevent 阻止默认事件
      </a>
    </p>
    <h1>事件</h1>
    <button v-on:click="agree = !agree">{{ agree }}</button>
    <br />
    <button @click="agree = !agree">简写{{ agree }}</button>
    <p @click="sayIt">事件响应样式-可以不带括号</p>
    <p @click="sayIt()">事件响应样式-带括号</p>
    <p @click="doit">默认传参</p>
    <p @click="doit($event)">默认传参$event</p>
    <p @click="doit('我喜欢你')">自定义传参</p>
    <p @click="doit('我喜欢你', $event)">自定义传参+默认参</p>
    <p @click="doit('我喜欢你', '没有原因')">自定义传参+自定义传参</p>
    <h1>样式绑定</h1>
    <p
      :style="{
        color: 'red',
        lineHeight: styleObj.lineHeight
      }"
    >
      绑定对象绑定对象
    </p>

    <p :style="'display:block'">我是表达</p>
    <p :style="styleObj">绑定对象</p>
    <input type="range" min="1" max="10" v-model.number="styleObj.lineHeight" />
    <h1>类名绑定</h1>
    <p :class="color">我很可爱</p>
    <p
      :class="{
        active: agree,
        bold: false
      }"
    >
      我是动态的样式
    </p>
    <!-- 当对象的属性值为true 类名bold才会绑定上 -->
    <h1 v-bind:title="msg">属性绑定</h1>
    <p :title="richMsg">属性绑定简写</p>
    <input type="checkbox" v-model="agree" /> {{ agree }}同意我们条款<br />
    <button :disabled="!agree">登录</button>
    <h1>条件选项-v-show v-if v-else-if v-else</h1>
    <p>{{ 7 > 5 ? '很大' : '很小' }}</p>
    <p v-if="isLog">欢迎回来主人</p>
    <p v-else>请登录</p>
    <p v-if="score >= 90">给你买个🚗</p>
    <p v-else-if="score >= 80">买个🛵</p>
    <p v-else-if="score >= 70">买个🚲</p>
    <p v-else>暴打一顿😥</p>
    <input type="range" v-model.number="score" />
    <p v-if="say">我爱你小前</p>
    <p v-show="say">我很中意你小端</p>
    <!-- v-if 销毁节点隐藏 v-show是css隐藏，频繁切换显示与隐藏建议v-show -->

    <h1>模板-首页</h1>
    <p class="active">{{ msg }}</p>
    <p v-text="msg"></p>
    <p v-html="richMsg"></p>
  </div>
</template>
<script>
export default {
  // vue3d生命周期与2相比卸载和卸载完毕不一样
  beforeCreate() {
    // 创建前 有this data与methods没有准备好
    console.log(this.$route, 'this')
  },
  created() {
    //创建完毕 data和methods准备完毕 $el dom没有准备 
  },
  beforeMount() {
    // 挂载前  有$el但是指令 v-for v-if 没有渲染
  },
  mounted() {
    // 挂载完毕，首次渲染完毕 指令被渲染成真实dom
  },
  beforeUpdate() {
    // 更新前，数据已经更新，dom没有更新渲染
  },
  updated() {
    // 数据与dom都已经更新渲染
    // 只要data更新 updateed和beforeUpdate都会被执行
  },
  beforeUnmount() {
    // 卸载前 data 和methods可以正常访问
    // v2 beforeDestory 销毁前
  },
  unmounted() {
    // 卸载完毕 data和methods访问不到 数据和模板与切断联系
    // v2 destoryed 销毁完毕
  },

  // 监听msg变化，存储到本地
  watch: {
    num: {
      handler(nval, oval){
        console.log('数据由', oval, '变化为', nval)
        // 只有值类型才有oval这个参数
        sessionStorage.setItem('num', this.num)
      },
      deep: true //如果监听类型是引用类型必须添加deep
    }
  },
  computed: {
    // 现有的num 2倍
    doubleNum: function () {
      return this.num * 2
    }
  },
  methods: {
    getInp() {
      alert(this.$refs.inp.value)
      // 因为 dom是动态渲染出来的，获取dom通过ref会更准确
    },
    showIt(e) {
      alert(e.target.value)
    },
    sayIt() {
      alert('你好')
    },
    doit(e, arg = '第二个参数') {
      console.log(e, arg)
    }
  },
  // 存储数据地方
  data() {
    return {
      list: ['香蕉', '苹果', '橘子', '榴莲'],
      num: 10,
      gender: 1,
      hobby: ['跳舞'],
      color: 'active',
      agree: false,
      say: false,
      score: 65,
      isLog: false,
      msg: '你好vue3',
      richMsg: '你好<strong>前端</strong>大佬',
      styleObj: { fontSize: '48px', lineHeight: 4 }
    }
  }
}
</script>
<style lang="scss">
.active {
  color: red;
}

.bold {
  font-weight: 900;
}

strong {
  font-weight: 900;
}
</style>
